<template>
	<view class="dialog-shop">
		<view class="cu-modal bottom-modal" :class="modalName == tag ? 'show' : ''">
			<view class="cu-dialog ">
				<view class="cu-dialog-avatar radius shadow padding-xs"><view class="cu-avatar bg-img " :style="'background-image: url(' + infos.img + ')'"></view></view>
				<view class="bg-white cu-dialog-content">
					<view class="flex padding  justify-between ">
						<view class="cu-dialog-hd text-left">
							<view class="text-red-rich text-size-30">{{ infos.price }}</view>
							<view class="text-black text-size-26">已选择：{{ infos.selected }}</view>
						</view>
						<view class="cuIcon-close text-red" @tap="hideModal"></view>
					</view>
					<view>
						<view class="cu-bar  margin-top-sm"><view class="action">选择颜色</view></view>
						<view class="grid col-4 ">
							<view class="margin-tb-sm text-center" v-for="(item, index) in infos.colors" :key="index">
								<button
									class="cu-btn round"
									@click="onSelectColors"
									:data-index="index"
									:disabled="!item.exist"
									:class="[item.chencked ? 'line-blue' : 'line-gray']"
								>
									{{ item.name }}
								</button>
							</view>
						</view>
						<view class="cu-bar  margin-top-sm"><view class="action">选择尺码</view></view>
						<view class="grid col-4 ">
							<view class="margin-tb-sm text-center" v-for="(item, index) in infos.sizes" :key="index">
								<button
									class="cu-btn round"
									@click="onSelectSizes"
									:data-index="index"
									:disabled="!item.exist"
									:class="[item.chencked ? 'line-blue' : 'line-gray']"
								>
									{{ item.name }}
								</button>
							</view>
						</view>
						<view class="cu-bar  margin-top-sm"><view class="action">选择尺码</view></view>
						<view class="padding-sm flex justify-start">
							<view class="flex bg-gray boxs-sum  align-center">
								<view class="flex-sub boxs-sum-char  padding-xs" @click="onSub">-</view>
								<view class="flex-twice boxs-sum-number padding-xs">{{ infos.number }}</view>
								<view class="flex-sub boxs-sum-char padding-xs" @click="onAdd">+</view>
							</view>  
						</view>
						<view class="padding flex" v-if="label=='updata'">
							<button class="cu-btn flex-sub round bg-gradient-menu text-white text-size-30" @tap="onCommit" :data-value="label">确定</button>
							<button class="cu-btn flex-sub round bg-gray text-black text-size-30 margin-left-sm " @tap="hideModal" :data-value="label">取消</button>
						</view>
						<view class="padding flex" v-else>
							<button class="cu-btn flex-sub text-white round bg-black text-size-30" @tap="onCommit" :data-value="label">加入购物车</button>
							<button class="cu-btn flex-sub text-white round bg-gradient-menu text-size-30 margin-left-sm " @tap="onCommit" :data-value="label">立即支付</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			modalName: false,
			infos: {},
			colorIndex: 0,
			sizeIndex: 0,
			winheight: this.ScreenHeight,
			StatusBar: this.StatusBar,
			CustomBar: this.CustomBar
		};
	},
	name: 'dialog-shop',
	computed: {
		style() {
			var style = '';
			return style;
		}
	},
	props: {
		datas: {},
		title: {
			type: String,
			default: '提示'
		},
		content: {
			type: String,
			default: ''
		},
		show: {
			type: [String, Boolean],
			default: false
		},
		tag: {
			type: String,
			default: ''
		},
		label: {
			type: String,
			default: ''
		}
	},
	watch: {
		show: function(data) {
			this.modalName = data;
		},
		infos: function(values) {
			console.log(values);
		}
	},
	created() {
		this.infos = this.datas;
		this.modalName = this.show;
	},
	methods: {
		onCommit() {
			this.modalName = false;
			let param = {
				type: true,
				label: this.label,
				number: this.infos.number,
				color: this.colorIndex,
				size: this.sizeIndex
			};
			this.$emit('oncommit', param);
		},
		showModal(e) {
			this.modalName = e.currentTarget.dataset.target;
		},
		onAdd: function() {
			this.infos.number++;
		},
		onSub: function() {
			if (this.infos.number > 0) {
				this.infos.number--;
			}
		},
		hideModal(e) {
			this.modalName = false;
			let param = {
				type: false,
				tag: this.tag,
				number: this.infos.number,
				color: this.colorIndex,
				size: this.sizeIndex
			};
			this.$emit('oncommit', param);
		},
		onSelectColors: function(e) {
			let index = e.currentTarget.dataset.index;
			if (this.colorIndex != index) {
				this.infos.colors[this.colorIndex].chencked = false;
				this.infos.colors[index].chencked = true;
				this.colorIndex = index;
			}
		},
		onSelectSizes: function(e) {
			let index = e.currentTarget.dataset.index;
			if (this.sizeIndex != index) {
				this.infos.sizes[this.sizeIndex].chencked = false;
				this.infos.sizes[index].chencked = true;
				this.sizeIndex = index;
			}
		}
	}
};
</script>

<style scoped>
.cu-dialog {
	position: relative;
	background: none;
}

.cu-avatar {
	width: 190upx;
	height: 190upx;
}

.cu-dialog-hd {
	margin-left: 240upx;
}

.cu-dialog-avatar {
	position: absolute;
	left: 35upx;
	z-index: 999;
	top: 0;
	background: rgba(255, 255, 255, 1);
	box-shadow: 0px 0px 12upx 0px rgba(156, 156, 163, 0.5);
	border-radius: 8upx;
}
.cu-dialog-content {
	margin-top: 100upx;
}
</style>
